import React, { useCallback, useEffect } from 'react'
import { connect } from 'react-redux'
import {
  getProgressActiveSuiteIdSelector,
  getProgressActivePlanSuitesSelector,
  getProgressActivePlanLogStatSelector,
  getProgressActivePlanIdSelector,
  getProgressActiveSuiteLogsSelector,
} from '../../selectors/baseSelector'
import { genProgressSetActiveSuite, genProgressSetActiveSuiteLogs } from '../../actions/home'
import { SingleSelectableList } from '../layout/singleSelectableList'
import { EmptyElement } from '../common/emptyElement'
import { ColHeader } from '../common/colHeader'
import { doGetAllStepsOfSuiteInPlan } from '../../source/doGetAllStepsOfSuiteInPlan'
import { doGetLogsOfSuite } from '../../source/doGetLogsOfSuite'
import { withSignal } from '../../common/withSignal';

const maStateToProps = state => {
  return {
    logStat: getProgressActivePlanLogStatSelector(state),
    activeSuiteId: getProgressActiveSuiteIdSelector(state),
    activePlanSuites: getProgressActivePlanSuitesSelector(state),
    activePlanId: getProgressActivePlanIdSelector(state),
    activeSuiteLogs: getProgressActiveSuiteLogsSelector(state),
  }
}

const mapDispatchToProps = dispatch => {
  return {
    setActiveSuite: suite => dispatch(genProgressSetActiveSuite(suite)),
    setActiveSuiteLogs: logs => dispatch(genProgressSetActiveSuiteLogs(logs)),
  }
}

export const ProgressSuiteList = connect(maStateToProps, mapDispatchToProps)((props) => {
  const { activeSuiteId, setActiveSuite, setActiveSuiteLogs, activePlanSuites, logStat, activePlanId } = props
  const wrapOnSelectItem = useCallback(item => {
    setActiveSuite(item)
    doGetAllStepsOfSuiteInPlan({ planId: activePlanId, suiteId: item.id })
  }, [activePlanId])

  const getPassProgress = useCallback(({ id }) => {
    const { pass, total } = logStat[id] || { pass: 0, total: 1 }
    return Math.min(pass / (total || 1), 1) * 100
  }, [logStat])

  const getFailureProgress = useCallback(({ id }) => {
    const { failure, total } = logStat[id] || { failure: 0, total: 1 }
    return Math.min(failure / (total || 1), 1) * 100
  }, [logStat])

  const getTitle = useCallback(item => item.title, [])
  const getLevel = useCallback(item => item.level, [])

  useEffect(() => {
    return withSignal(signal => {
      if (activePlanId && activeSuiteId) {
        doGetLogsOfSuite({ planId: activePlanId, suiteId: activeSuiteId }, { signal })
      } else {
        setActiveSuiteLogs([])
      }
    })
  }, [activePlanId, activeSuiteId])

  const { pass: activeSuitePassCount, failure: activeSuiteFailureCount } = logStat[activeSuiteId] || { pass: 0, failure: 0 }
  useEffect(() => {
    return withSignal(signal => {
      if (activeSuitePassCount + activeSuiteFailureCount) {
        doGetLogsOfSuite({ planId: activePlanId, suiteId: activeSuiteId }, { signal })
      }
    })
  }, [activePlanId, activeSuiteId, activeSuitePassCount, activeSuiteFailureCount])

  return (
    <React.Fragment>
      <ColHeader title='所包含用例：' />
      {activePlanSuites.length
        ? <SingleSelectableList activeValue={activeSuiteId} dataSource={activePlanSuites}
          getItemValue={item => item.id || item.suiteId} getItemTitle={getTitle} getItemTitle2={getLevel}
          onSelectItem={wrapOnSelectItem} getItemProgress={getPassProgress}
          getItemProgress2={getFailureProgress} />
        : <EmptyElement />}
    </React.Fragment>
  )
})